import styled from "styled-components";

export const SongTableStyle = styled.div`
  .songTableTitle {
    width: 640px;
    margin: 0 auto;
    height: 35px;
    border-bottom: 2px solid #c20c0c;
    .song-list {
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 28px;
    }
    .song-number {
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 12px;
      margin: 9px 0 0 20px;
    }
    .song-time-r {
      margin-top: 6px;
      :after {
        content: "";
        display: none;
        clear: both;
        overflow: hidden;
      }
      .play-time-number {
        color: #c20c0c;
      }
    }
  }
  .playList-table {
    width: 640px;
    margin: 0 auto;
    table {
      border: 1px solid #d9d9d9;
      thead {
        background-position: 0 0;
        tr {
          th {
            height: 35px;
            /* text-align: normal; */
            background-color: #f7f7f7;
            background-position: 0 0;
            background-repeat: repeat-x;
            vertical-align: top;
            text-align: left;
            font-weight: normal;
            color: #666;
            .wp {
              background-position: 0 -56px;
              line-height: 18px;
              padding: 8px 10px;
            }
          }
          .first-kb {
            width: 77px;
          }
          .bt {
            width: 235px;
          }
          .sc {
            width: 111px;
          }
          .gs {
            width: 89px;
          }
          .zj {
            width: 127px;
          }
        }
      }
      tbody {
        .tr-box {
          height: 30px;
          :nth-child(2n-1) {
            background-color: #f7f7f7;
          }
          .tr-num {
            .tr-num-div {
              width: 57px;
              margin: 0 auto;
              display: flex;
              align-items: center;
              justify-content: space-between;
              span {
                width: 25px;
                text-align: center;
                color: #999;
              }
              .tr-name-play {
                display: block;
                width: 17px;
                height: 17px;
                background-position: 0 -103px;
                margin-right: 7px;
                cursor: pointer;
                :hover {
                  background-position: 0 -128px;
                }
              }
            }
          }
          .tr-name {
            padding-left: 10px;
            .sp-i {
              display: block;
              width: 23px;
              height: 17px;
              margin: 1px 0 0 0;
              background-position: 0 -151px;
              cursor: pointer;
              float: left;
              :hover {
                background-position: -30px -151px;
              }
            }
            .tr-name-span {
              /* overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap; */
              display: block;
              max-width: 180px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-right: 5px;
            }
            .tr-name-play-three {
              margin: 18px 7px 0px 10px;
            }
            .tr-name-span-three {
              display: block;
              margin-top: 18px;
            }
          }
          .tr-time {
            padding-left: 10px;
            .tr-time-times {
            }
          }
          .tr-songer {
            padding-left: 10px;
            div {
              width: 116px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .tr-zj {
            padding-left: 10px;
            div {
              width: 127px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          :hover {
            .tr-time {
              .tr-time-times {
                display: none !important;
              }
              .tr-time-box {
                display: block !important;
              }
            }
          }
        }
      }
    }
  }
`;
